<template>
    <div class>
        <div class="proves-title">
            <img src="@/assets/warning.png" alt />
            <p>您所提交的审核材料将仅用于审核使用，不会对外公开展示</p>
        </div>
        <div class="proves-list">
            <div class="proves-list__ctx">
                <div class="proves-list__title">患者身份验证</div>
                <ul>
                    <li>· 患者身份信息</li>
                    <li>· 患者身份证原件或出生证原件</li>
                </ul>
                <div
                    class="proves-list__btn"
                    @click="toBasic()"
                >查 看</div>
            </div>
            <div class="proves-list__ctx">
                <div class="proves-list__title">收款人身份验证</div>
                <ul>
                    <li>· 收款人身份信息及收款账户信息</li>
                    <li>· 收款人身份证原件</li>
                    <li>· 收款人与患者的关系证明</li>
                </ul>
                <div
                    class="proves-list__btn"
                    @click="toPpayee()"
                >查 看</div>
            </div>
            <div class="proves-list__ctx">
                <div class="proves-list__title">诊断证明</div>
                <ul>
                    <li>· 患者患病信息</li>
                    <li>· 患者诊断证明</li>
                    <li>· 其他补充证明材料</li>
                </ul>
                <div
                    class="proves-list__btn"
                    @click="toConfirmed()"
                >查 看</div>
            </div>
            <div class="proves-list__ctx">
                <div class="proves-list__title">征信信息</div>
                <ul>
                    <li>· 患者车产价值</li>
                    <li>· 患者房产价值</li>
                    <li>· 其他补充证明材料</li>
                </ul>
                <div
                    class="proves-list__btn"
                    @click="toCondition()"
                >查 看</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        toBasic(){
            this.$router.push({
                path: "/DetailBasic",
                query: { id: this.$route.query.id}
            });
        },
        toPpayee(){
            this.$router.push({
                path: "/DetailPpayee",
                query: { id: this.$route.query.id}
            });
        },
        toConfirmed(){
            this.$router.push({
                path: "/DetailConfirmed",
                query: { id: this.$route.query.id}
            });
        },
        toCondition(){
            this.$router.push({
                path: "/DetailCondition",
                query: { id: this.$route.query.id}
            });
        }
    }
};
</script>

<style scoped>
.proves-title {
    display: flex;
    align-items: center;
    background: rgba(255, 60, 60, 0.04);
    border-radius: 16px;
    margin: 24px 24px 16px;
    padding: 16px;
}
.proves-title img {
    width: 32px;
    height: 32px;
    margin-right: 16px;
}
.proves-title p {
    flex: 1;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    line-height: 17px;
    color: #ff3c3c;
}
.proves-list__ctx {
    padding: 24px 16px;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 0.88888889rem;
    margin: 0 24px 16px;
    position: relative;
    background-size: 96px !important;
}
.proves-list__title {
    font-size: 20px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
}
.proves-list ul {
    padding-top: 8px;
}
.proves-list ul li {
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.56);
    line-height: 17px;
    list-style: none;
}
.proves-list__btn {
    padding: 8px 24px;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: #ff3c3c;
    line-height: 20px;
    background: rgba(255, 60, 60, 0.08);
    border-radius: 25px;
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -18px;
}
</style>